<template>
    <view class="box_p" @click="go()" hover-class="uni-list-cell-hover">
        <view class="imgContent" :style="{ background: bg }">
            <image :src="img" :style="{ width: w, height: w}" />
        </view>
        <view class="title">{{ title }}</view>
    </view>
</template>

<script>
export default {
    props: {
        img: String,
        bg: String,
        title: String,
        url: String,
        fun: Function,
        size: Number
    },
    computed: {
        w() {
            if (this.size) {
                return uni.upx2px(90) + 'px'
            } else {
                return uni.upx2px(90) + 'px'
            }
        }
    },
    data() {
        return {}
    },
    methods: {
        go() {
            if (this.url) {
                uni.navigateTo({
                    url: this.url
                })
            }
            if (this.fun) {
                this.fun()
            }
        }
    }
}
</script>

<style lang="scss">
.box_p {
    box-sizing: border-box;
    text-align: center;
    margin: 20upx 0;
    width: 187.5upx;
}

.imgContent {
    width: 90upx;
    height: 90upx;
    padding: 4upx;
    border-radius: 44upx;
    margin: 0 auto;
}

.box_p .title {
    margin-top: 4upx;
    font-size: 0.67rem;
    color: $uni-color-subtitle;
}
</style>
